<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主轴方向 换行 主轴方向与换行的简写</title>
</head>
    <style>
        /* box1中的3个div还是和以前一样，是简单的流式布局 */
        .box1{
           background-color: yellow;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            font-size: 30px;
            border: 3px  solid green;
        }
        .box2{
            background-color: aqua;
            /* 指定box2作为弹性布局 */
            /* 效果：子元素一横排，不用我们自己浮动 清除浮动 */
            /* 想让谁里面的元素横向排列，就给谁设置此属性，也就是给父 */
            display: flex;//弹性盒模型 */
            /* 01 flex的行模式与列模式 */
            flex-direction: row; /*行模式 正向排序 默认值*/
            flex-direction: column;/* 列模式 正向排序*/
            flex-direction: column-reverse; /* 列模式 反向排序 */
            flex-direction: row-reverse; /*行模式 反向排序*/
            /* 02 flex的换行 */
            /* 如果把浏览器窗口缩小到不够6个div大小的宽度，6个div还是在同一行，并没有掉块：
             原因：flex自带了很多属性，关于换行的默认值就是不换行*/
            flex-direction: row;/*行模式 正向排序 默认值*/
            flex-wrap: nowrap;/* 默认值不换行 */
            flex-wrap: wrap; /* 换行，一行显示不下到下一行显示 12345 67 */
            flex-wrap: wrap-reverse; /* 换行且行数反向排列 67 12345 */
        }
        .box2>div {
            width: 120px;
            height: 120px;
            border: 2px solid red;
            font-size: 30px;
        }
    </style>
<body>
    <div class="box1">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
    <div class="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>